<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="x-ua-compatible" content="ie=edge">
        <title>xxx</title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <!-- 引入css文件  start-->
        <link href="https://cdn.bootcss.com/bootstrap/4.1.0/css/bootstrap.css" rel="stylesheet">
        <!-- 引入css文件  end-->
    </head>
    <body style="margin: 0 auto">
        <div class="container">
            <div class="row">
                <div style="margin-bottom: 5%" class="col-md-12 text-center head-title-font">
                    <button id="auto_num" class="btn btn-primary" style="width: 10%"></button>
                </div>
            </div>
        </div>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.slim.js"></script>
<!-- 新添加代码  start -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.0.1/socket.io.js" integrity="sha512-q/dWJ3kcmjBLU4Qc47E4A9kTB4m3wuTY7vkFJDTZKjTs8jhyGQnaUrxa0Ytd0ssMZhbNua9hE+E7Qv1j+DyZwA==" crossorigin="anonymous"></script>
    <script>
        var socket = io('ws://10.25.150.53:5000/im_chat');
        socket.on('connect', function() { // 发送到服务器的通信内容
        socket.emit('connect_event', {data: '我已连接上服务端！'});
    });

    socket.on('server_response', function(msg) {
        //显示接受到的通信内容，包括服务器端直接发送的内容和反馈给客户端的内容
        console.log(msg);
    });
    socket.on('user_response', function(msg) {
        // 获取后端传过来的业务数据
        var obj = eval(msg.data[0]);
        console.log(obj);
        $("#auto_num").empty();
        $("#auto_num").append(obj['name']);

    });
    </script>
<!-- 新添加代码 end -->
    </body>
</html>